<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 10px;
            border: 1px solid green;
            border-radius: 3px;
            margin: 150px auto;
            position: relative;
        }

        #run {
            /* width: 200px; */
            height: 9px;
            margin-top: 1px;
            border-radius: 3px;
            background-color: red;
            float: left;
        }

        i {
            font-size: 8px;
            float: left;
            position: absolute;
            top: -1px;
        }

        .box1 {
            width: 860px;
            height: 20px;
            border-radius: 4px;
            margin: 100px auto;
            border: 2px solid green;
            position: relative;
        }

        #run1 {
            height: 20px;
            background: orange;
            border-radius: 4px;
            float: left;
        }

        #text1 {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="run"></div>
        <i id="text">0</i>
    </div>


    <div class="box1">
        <div id="run1" style="width: 0;"></div>
        <span id="text1"></span>
    </div>

    <script>
        //  随机变化 （增加百分比）
        var num = 0
        var time = setInterval(function() {
            //  随机添加0—10的数值
            num += Math.random() * 10
            //  假如num = 100的时候停止计时器并返回num=100
            if (num >= 100) {
                num = 100
                clearInterval(time)
            }
            //  设置进度条的长度
            run.style.width = num.toFixed(2) + '%'
            //  设置提示文字的位置
            text.style.left = num.toFixed(2) + 2 + '%'
            //  设置提示文字
            text.innerHTML = num.toFixed(2) + '%'
        }, 500)

        //  等量增加   （增加px）
        var time1 = setInterval(function() {
            //  获取进度条长度
            var wid = parseInt(run1.style.width)
            //  等量+100
            var num1 = wid + 100
            //  判断是否到达最大值860，符合则关闭计时器且输出num1为父元素的长度
            if (num1 >= 860) {
                num1 = 860
                clearInterval(time1)
            }
            //  设置进度条的长度
            run1.style.width = num1 + 'px'
            //  设置提示文字的位置
            text1.style.left = num1 + 5 + 'px'
            //  设置提示文字
            text1.innerHTML = ((num1 / 860) * 100).toFixed(2) + '%'
        }, 500)
    </script>
</body>

</html>